// /* global $ */
// let board = [];
// let score = 0;
// let hasConflicted = [];
//
// $(document).ready(function () {
//   newgame();
// })
// function newgame() {
//   init();
//   generateOneNumber();
//   generateOneNumber();
//   $('.gameover-box').remove();
// }
// function init() {
//   for (let i=0;i<4;i++) {
//     for (let j=0;j<4;j++){
//       let gridCell=$("#grid-cell-"+i+"-"+j);
//       gridCell.css('top',getPosTop(i,j));
//       gridCell.css('left',getPosLeft(i,j));
//     }
//   }
//   for(let i=0;i<4;i++) {
//     board[i]=[];
//     hasConflicted[i]=[];
//     for (let j=0;j<4;j++){
//       board[i][j]=0;
//       hasConflicted[i][j]=false;
//     }
//   }
//   score=0;
//   updateBoardView();
//   updateScore(score);
// }
// function  updateBoardView() {
//   $('.number-cell').remove();
//   for (let i=0;i<4;i++) {
//     for (let j = 0; j < 4; j++) {
//       $('.grid-container').append('<div class="number-cell" id="number-cell-'+i+'-'+j+'"></div>')
//       let theNumberCell=$("#number-cell-"+i+'-'+j);
//       if(board[i][j]===0){
//         theNumberCell.css('width','0px');
//         theNumberCell.css('height','0px');
//         theNumberCell.css('top',getPosTop(i,j)+50);
//         theNumberCell.css('top',getPosLeft(i,j)+50);
//       }else {
//         theNumberCell.css('width','100px');
//         theNumberCell.css('height','100px');
//         theNumberCell.css('top',getPosTop(i,j));
//         theNumberCell.css('left',getPosLeft(i,j));
//         theNumberCell.css('background-color',getNumberBackgroundColor(board[i][j]));
//         theNumberCell.css('color',getNumberColor(board[i][j]));
//         theNumberCell.text(board[i][j]);
//       }
//       hasConflicted[i][j]=false;
//     }
//   }
//
// }
// function generateOneNumber() {
//   if(nospace(board)){
//     return false;
//   }
//   // let medianX=
//   // parseInt(Math.floor(Math.random()*4));
//   let randx=Math.floor(Math.random()*4);
//   let randy=Math.floor(Math.random()*4);
//   let times=0;
//   while (times<50){
//     if(board[randx][randy] === 0){
//       break;
//     }
//     randx=Math.floor(Math.random()*4);
//     randy=Math.floor(Math.random()*4);
//     times++;
//   }
//   if(times===50){
//     for (let i=0;i<4;i++) {
//       for (let j = 0; j < 4; j++) {
//         if(board[i][j]===0) {
//           randx = i;
//           randy = j;
//         }
//       }
//     }
//
//   }
//   let randNumber=Math.random()?2:4;
//   board[randx][randy]=randNumber;
//   showNumberWithAnimation(randx,randy,randNumber);
//   return true;
// }
//
// $(document).keydown(function (event) {
//   switch (event.keyCode) {
//     case 37:  //left
//       if(moveLeft()){
//         setTimeout('generateOneNumber()',210);
//         setTimeout('isgameover()',300)
//       }
//       break;
//     case 38:   //up
//       if(moveUp()){
//         setTimeout('generateOneNumber()',210);
//         setTimeout('isgameover()',300)
//       }
//       break;
//     case 39:   //right
//       if(moveRight()){
//         setTimeout('generateOneNumber()',210);
//         setTimeout('isgameover()',300)
//       }
//       break;
//     case 40:  //down
//       if(moveDown()){
//         setTimeout('generateOneNumber()',210);
//         setTimeout('isgameover()',300)
//       }
//       break;
//     default:
//       break;
//   }
// });
// function isgameover(){
//   if(nospace(board) && noMove(board)){
//     gameover();
//   }
// }
// function gameover() {
//   $('#grid-container').append('<div class="gameover-box"><p class="gameover-text">Game Over</p></div>');
// }
//
// function moveLeft(){
//   if(!canMoveLeft(board)){
//     return false;
//   }
//   for(let i = 0; i < 4; i++ ){
//     for(let j = 1; j < 4; j++ ){
//       if(board[i][j]!==0){
//         for(let k = 0; k < j; k++ ){
//           if(board[i][k] === 0 && noBlockHorizontal(i,k,j,board)){
//             //only move
//             showMoveAnimation(i,j,i,k);
//             board[i][k] = board[i][j];
//             board[i][j] = 0;
//
//           }
//           else if(board[i][k] === board[i][j] && noBlockHorizontal(i,k,j,board) && !hasConflicted[i][k]){
//             //move and add
//             showMoveAnimation(i,j,i,k);
//             board[i][k] += board[i][j];
//             board[i][j] = 0;
//             //add score
//             score += board[i][k];
//             updateScore(score);
//             hasConflicted[i][k] = true;
//
//           }
//         }
//       }
//     }
//   }
//   setTimeout("updateBoardView()",200);
//   return true;
// }
//
// function moveRight(){
//   if(!canMoveRight(board)){
//     return false;
//   }
//   for(let i = 0; i < 4; i++ ){
//     for(let j = 2; j >= 0; j-- ){
//       if(board[i][j] !== 0){
//         for(let k = 3; k > j; k-- ){
//           if(board[i][k] === 0 && noBlockHorizontal(i,j,k,board)){
//             //move
//             showMoveAnimation(i,j,i,k);
//             board[i][k] = board[i][j];
//             board[i][j] = 0;
//
//           }
//           else if(board[i][k] === board[i][j] && noBlockHorizontal(i,j,k,board) && !hasConflicted[i][k]){
//             //move and add
//             showMoveAnimation(i,j,i,k);
//             board[i][k] *= 2;
//             board[i][j] = 0;
//             //add score
//             score += board[i][k];
//             updateScore(score);
//             hasConflicted[i][k] = true;
//
//           }
//         }
//       }
//     }
//   }
//   setTimeout("updateBoardView()",200);
//   return true;
// }
//
// function moveUp(){
//   if(!canMoveUp(board)){
//     return false;
//   }
//   for(let j = 0; j < 4; j++ ){
//     for(let i = 1; i < 4; i++ ){
//       if(board[i][j] !== 0){
//         for(let k = 0; k < i; k++ ){
//           if(board[k][j] === 0 && noBlockVertical(j,k,i,board)){
//             //move
//             showMoveAnimation(i,j,k,j);
//             board[k][j] = board[i][j];
//             board[i][j] = 0;
//
//           }
//           else if(board[k][j] === board[i][j] && noBlockVertical(j,k,i,board) && !hasConflicted[k][j]){
//             //move and add
//             showMoveAnimation(i,j,k,j);
//             board[k][j] *= 2;
//             board[i][j] = 0;
//             //add score
//             score += board[k][j];
//             updateScore(score);
//             hasConflicted[k][j] = true;
//
//           }
//         }
//       }
//     }
//   }
//   setTimeout("updateBoardView()",200);
//   return true;
// }
//
// function moveDown(){
//   if( !canMoveDown( board ) )
//     return false;
//
//   //moveDown
//   for(let j = 0 ; j < 4 ; j ++ )
//     for(let i = 2 ; i >= 0 ; i -- ){
//       if( board[i][j] !== 0 ){
//         for(let k = 3 ; k > i ; k -- ){
//
//           if( board[k][j] === 0 && noBlockVertical( j , i , k , board ) ){
//             showMoveAnimation( i , j , k , j );
//             board[k][j] = board[i][j];
//             board[i][j] = 0;
//
//           }
//           else if( board[k][j] === board[i][j] && noBlockVertical( j , i , k , board ) && !hasConflicted[k][j]){
//             showMoveAnimation( i , j , k , j );
//             board[k][j] *= 2;
//             board[i][j] = 0;
//             //add score
//             score += board[k][j];
//             updateScore(score);
//             hasConflicted[k][j] = true;
//
//           }
//         }
//       }
//     }
//
//   setTimeout("updateBoardView()",200);
//   return true;
// }
/* global $ */
let board = [];
let score = 0;
let hasConflicted = [];
let i;
let j;

$(document).ready(function(){
  newgame();
});

function newgame(){
  // 初始化棋盘格
  init();
  // 在随机两个格子生成数字
  generateOneNumber();
  generateOneNumber();
  //清除gameover界面
  $('.gameover-box').remove();
}

function init(){
 
  for(i = 0; i < 4; i++){
    for(j = 0; j <4; j++){
      const gridCell = $("#grid-cell-" + i + "-" + j);
      gridCell.css('top',getPosTop(i,j));
      gridCell.css('left',getPosLeft(i,j));
    }
  }
  for(i = 0; i < 4; i++){
    board[i] = [];
    hasConflicted[i] = [];
    for(j = 0; j < 4; j++)
      board[i][j] = 0;
    hasConflicted[i][j] = false;
  }
  score = 0;
  updateBoardView();
  updateScore(score);
}

function updateBoardView() {
  $(".number-cell").remove();
  
  for( i = 0 ; i < 4; i++)
    for( j = 0; j <4; j++){
      $("#grid-container").append('<div class="number-cell" id="number-cell-'+i+'-'+j+'"></div>');
      const theNumberCell = $('#number-cell-' + i + '-' + j);
      
      if(board[i][j] === 0){
        theNumberCell.css('width','0px');
        theNumberCell.css('height','0px');
        theNumberCell.css('top',getPosTop(i,j)+50);
        theNumberCell.css('left',getPosLeft(i,j)+50);
      }else{
        theNumberCell.css('width','100px');
        theNumberCell.css('height','100px');
        theNumberCell.css('top',getPosTop(i,j));
        theNumberCell.css('left',getPosLeft(i,j));
        theNumberCell.css('background-color',getNumberBackgroundColor(board[i][j]));
        theNumberCell.css('color',getNumberColor(board[i][j]));
        theNumberCell.text(board[i][j]);
      }
      hasConflicted[i][j] = false;
    }
}

function generateOneNumber(){
  if(nospace(board)){
    return false;
  }
  //随机一个位置
  // parseInt(Math.floor(Math.random() * 4));
  let randx = Math.floor(Math.random() * 4);
  let randy = Math.floor(Math.random() * 4);
  let times = 0;
  while(times < 50){
    if(board[randx][randy] === 0){
      break;
    }
    randx = Math.floor(Math.random() * 4);
    randy = Math.floor(Math.random() * 4);
    times++
  }
  if(times === 50){
    for( i = 0; i < 4; i++){
      for(j =0; j < 4; j++){
        if(board[i][j] === 0){
          randx = i;
          randy = j;
        }
      }
    }
  }
  //随机一个数字
  const randNumber = Math.random()<0.5?2:4;
  //在随机位置显示随机数字
  board[randx][randy] = randNumber;
  showNumberWithAnimation(randx,randy,randNumber);
  
  return true;
}
function randomAndG(){
  setTimeout("generateOneNumber()",210);
  setTimeout("isgameover()",300);
}
$(document).keydown(function(event){
  switch(event.keyCode){
    case 37 : //left
      
      if(moveLeft()){
       randomAndG();
      }
      break;
    case 38 : //up
      event.preventDefault();//取消方向键控制滚动条
      if(moveUp()){
        randomAndG();
      }
      break;
    case 39 : //right
      if(moveRight()){
        randomAndG();
      }
      break;
    case 40 : //down
      event.preventDefault();
      if(moveDown()){
        randomAndG();
      }
      break;
    default : //default
      break;
  }
});

function isgameover(){
  if(nospace(board) && noMove(board)){
    gameover();
  }
}

function gameover(){
  $("#grid-container").append('<div class="gameover-box"><p class="gameover-text">Game Over</p></div>');
  let bestScore=sessionStorage.score;
  if(bestScore<=score){
  sessionStorage.score=score;
    bestScore=score;
  $('#Bestscore').html(bestScore);
  }
  
}
function addScore(score,i,k) {
  updateScore(score);
  return hasConflicted[i][k]=true;
}
function moveLeft(){
  if(!canMoveLeft(board)){
    return false;
  }
  for( i = 0; i < 4; i++ ){
    for( j = 1; j < 4; j++ ){
      if(board[i][j]!==0){
        for(let k = 0; k < j; k++ ){
          if(board[i][k] === 0 && noBlockHorizontal(i,k,j,board)){
            //only move
            showMoveAnimation(i,j,i,k);
            board[i][k] = board[i][j];
            board[i][j] = 0;
            
          }
          else if(board[i][k] === board[i][j] && noBlockHorizontal(i,k,j,board) && !hasConflicted[i][k]){
            //move and add
            showMoveAnimation(i,j,i,k);
            board[i][k] += board[i][j];
            board[i][j] = 0;
            //add score
            score += board[i][k];
            // updateScore(score);
            // hasConflicted[i][k] = true;
            addScore(score,i,k);
            
          }
        }
      }
    }
  }
  setTimeout("updateBoardView()",200);
  return true;
}

function moveRight(){
  if(!canMoveRight(board)){
    return false;
  }
  for(i = 0; i < 4; i++ ){
    for( j = 2; j >= 0; j-- ){
      if(board[i][j] !== 0){
        for(let k = 3; k > j; k-- ){
          if(board[i][k] === 0 && noBlockHorizontal(i,j,k,board)){
            //move
            showMoveAnimation(i,j,i,k);
            board[i][k] = board[i][j];
            board[i][j] = 0;
            
          }
          else if(board[i][k] === board[i][j] && noBlockHorizontal(i,j,k,board) && !hasConflicted[i][k]){
            //move and add
            showMoveAnimation(i,j,i,k);
            board[i][k] *= 2;
            board[i][j] = 0;
            //add score
            score += board[i][k];
            addScore(score,i,k);
            
          }
        }
      }
    }
  }
  setTimeout("updateBoardView()",200);
  return true;
}

function moveUp(){
  if(!canMoveUp(board)){
    return false;
  }
  for( j = 0; j < 4; j++ ){
    for( i = 1; i < 4; i++ ){
      if(board[i][j] !== 0){
        for(let k = 0; k < i; k++ ){
          if(board[k][j] === 0 && noBlockVertical(j,k,i,board)){
            //move
            showMoveAnimation(i,j,k,j);
            board[k][j] = board[i][j];
            board[i][j] = 0;
            
          }
          else if(board[k][j] === board[i][j] && noBlockVertical(j,k,i,board) && !hasConflicted[k][j]){
            //move and add
            showMoveAnimation(i,j,k,j);
            board[k][j] *= 2;
            board[i][j] = 0;
            //add score
            score += board[k][j];
           addScore(score,k,j);
            
          }
        }
      }
    }
  }
  setTimeout("updateBoardView()",200);
  return true;
}

function moveDown(){
  if( !canMoveDown( board ) )
    return false;
  
  //moveDown
  for(j = 0 ; j < 4 ; j ++ ) {
    for (i = 2; i >= 0; i--) {
      if (board[i][j] !== 0) {
        for (let k = 3; k > i; k--) {
          if (board[k][j] === 0 && noBlockVertical(j, i, k, board)) {
            showMoveAnimation(i, j, k, j);
            board[k][j] = board[i][j];
            board[i][j] = 0;
          
          } else if (board[k][j] === board[i][j] && noBlockVertical(j, i, k, board) && !hasConflicted[k][j]) {
            showMoveAnimation(i, j, k, j);
            board[k][j] *= 2;
            board[i][j] = 0;
            //add score
            score += board[k][j];
            // updateScore(score);
            // hasConflicted[k][j] = true;
            addScore(score,k,j);
          
          }
        }
      }
    }
  }
  setTimeout("updateBoardView()",200);
  return true;
}

